<template>
    <view class="content">
        <!-- 弹出层组件 -->
        <pure-modal
            :show="show"
            :header="showHeader"
            :footer="showFooter"
            title="《将进酒》"
            :stopCloseOnClickOverlay="stopCloseOnClickOverlay"
            :showCancel="showCancel"
            :showConfirm="showConfirm"
            @cancel="handleCancel"
            @confirm="handleConfirm"
            :cancelClass="cancelClass"
            :confirmClass="confirmClass"
            :hideLine="hideLine"
            :cancelOpts="cancelOpts"
            :confirmOpts="confirmOpts"
        >
            <view class="modal-content">
                <rich-text :nodes="content"></rich-text>
            </view>
        </pure-modal>

        <a-demo title="基础使用">
            <pure-button text="显示对话框" @onClick="handleShowBase" class="pure-button-primary"></pure-button>
        </a-demo>

        <a-demo title="显示Header">
            <pure-button text="显示Header" @onClick="handleShowHeader" class="pure-button-success"></pure-button>
        </a-demo>

        <a-demo title="显示取消按钮">
            <pure-button text="显示取消按钮" @onClick="handleShowCancel" class="pure-button-danger"></pure-button>
        </a-demo>

        <a-demo title="自定义按钮类名">
            <pure-button text="自定义按钮类名" @onClick="handleShowCustomClass" class="pure-button-warning"></pure-button>
        </a-demo>

        <a-demo title="禁止点击遮罩关闭">
            <pure-button text="禁止点击遮罩关闭" @onClick="handleStopCloseOnClickOverlay" class="pure-button-info"></pure-button>
        </a-demo>

        <a-demo title="自定义按钮配置">
            <pure-button text="自定义按钮配置" @onClick="handleShowCustomOpts" class="pure-button-primary"></pure-button>
        </a-demo>

        <!-- 弹出层组件 -->
        <pure-modal
            :show="showCustom"
            :header="showHeader"
            :footer="showFooter"
            title="《将进酒》"
            :stopCloseOnClickOverlay="stopCloseOnClickOverlay"
            :showCancel="showCancel"
            :showConfirm="showConfirm"
            @cancel="handleCloseCustom"
            @confirm="handleCloseCustom"
            :cancelClass="cancelClass"
            :confirmClass="confirmClass"
            :hideLine="hideLine"
            class="custom-modal-animation"
        >
            <view class="modal-content">
                <rich-text :nodes="content"></rich-text>
            </view>
        </pure-modal>

        <a-demo title="自定义过渡动画">
            <pure-button text="自定义过渡动画" @onClick="handleShowCustom" class="pure-button-success"></pure-button>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 主题
    const themes = ref(["primary", "success", "danger", "warning", "info"]);

    // 显示状态
    const show = ref(false);
    const showCustom = ref(false);
    const showHeader = ref(false);
    const showFooter = ref(false);
    const stopCloseOnClickOverlay = ref(false);
    const showCancel = ref(false);
    const showConfirm = ref(false);
    const cancelClass = ref("");
    const confirmClass = ref("");
    const hideLine = ref(false);
    const cancelOpts = ref(null);
    const confirmOpts = ref(null);

    // 内容
    const content = ref(`
        <p>君不见，黄河之水天上来，奔流到海不复回。</p>
        <p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
        <p>人生得意须尽欢，莫使金樽空对月。</p>
        <p>天生我材必有用，千金散尽还复来。</p>
        <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
        <p>岑夫子，丹丘生，将进酒，杯莫停。</p>
        <p>与君歌一曲，请君为我倾耳听。</p>
        <p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
        <p>古来圣贤皆寂寞，惟有饮者留其名。</p>
        <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
        <p>主人何为言少钱，径须沽取对君酌。</p>
        <p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
    `);

    // 基础使用
    function handleShowBase() {
        showHeader.value = false;
        stopCloseOnClickOverlay.value = false;
        showConfirm.value = true;
        showCancel.value = false;
        cancelClass.value = "";
        confirmClass.value = "";
        hideLine.value = false;
        cancelOpts.value = null;
        confirmOpts.value = null;
        show.value = true;
    }

    // 显示Header
    function handleShowHeader() {
        showHeader.value = true;
        stopCloseOnClickOverlay.value = false;
        showConfirm.value = true;
        showCancel.value = false;
        cancelClass.value = "";
        confirmClass.value = "";
        hideLine.value = false;
        cancelOpts.value = null;
        confirmOpts.value = null;
        show.value = true;
    }

    // 显示取消按钮
    function handleShowCancel() {
        showHeader.value = true;
        stopCloseOnClickOverlay.value = false;
        showConfirm.value = true;
        showCancel.value = true;
        cancelClass.value = "";
        confirmClass.value = "";
        hideLine.value = false;
        cancelOpts.value = null;
        confirmOpts.value = null;
        show.value = true;
    }

    // 自定义按钮类名
    function handleShowCustomClass() {
        showHeader.value = true;
        stopCloseOnClickOverlay.value = false;
        showConfirm.value = true;
        showCancel.value = true;
        cancelClass.value = "pure-button-info";
        confirmClass.value = "pure-button-primary";
        hideLine.value = true;
        cancelOpts.value = null;
        confirmOpts.value = null;
        show.value = true;
    }
    // 禁止点击遮罩关闭
    function handleStopCloseOnClickOverlay() {
        showHeader.value = true;
        stopCloseOnClickOverlay.value = true;
        showConfirm.value = true;
        showCancel.value = true;
        cancelClass.value = "";
        confirmClass.value = "";
        hideLine.value = false;
        cancelOpts.value = null;
        confirmOpts.value = null;
        show.value = true;
    }

    // 禁止点击遮罩关闭
    function handleShowCustomOpts() {
        showHeader.value = true;
        stopCloseOnClickOverlay.value = false;
        showConfirm.value = true;
        showCancel.value = true;
        cancelClass.value = "";
        confirmClass.value = "";
        hideLine.value = false;
        cancelOpts.value = {
            icon: "/static/icons/icon.png",
        };
        confirmOpts.value = {
            loading: true,
            loadingText: "处理中...",
        };
        show.value = true;
    }

    // 取消
    function handleCancel() {
        show.value = false;
    }

    // 确定
    function handleConfirm() {
        show.value = false;
    }

    // 显示自定义过渡动画
    function handleShowCustom() {
        showCustom.value = true;
    }

    // 关闭自定义过渡动画
    function handleCloseCustom() {
        showCustom.value = false;
    }
</script>

<style lang="scss" scoped>
    .content {
        --pure-popup-header-text-align: center;
        --pure-popup-title-font-size: var(--pure-font-size-larger);
        --pure-popup-title-font-weight: 600;
        --pure-popup-footer-text-align: right;
        --pure-popup-footer-font-size: var(--pure-font-size-smaller);
    }

    .modal-content {
        box-sizing: border-box;
        padding: 10px 20px;
        line-height: 2;
        text-align: justify;
        font-size: 0.9em;
    }

    .buttons {
        display: flex;
        gap: 10px;
        margin: 10px 0;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .custom-modal-animation {
        --pure-modal-transition-timing-function: ease-in-out;
        --pure-modal-content-before-show-transform: translate(-50%, -50%) scale(0) rotate(0deg);
        --pure-modal-content-to-show-transform: translate(-50%, -50%) scale(1.25) rotate(360deg);
        --pure-modal-content-show-transform: translate(-50%, -50%) scale(1) rotate(0deg);
        --pure-modal-content-before-hide-transform: translate(-50%, -50%) scale(1) rotate(0deg);
        --pure-modal-content-to-hide-transform: translate(-50%, -50%) scale(1.25) rotate(360deg);
        --pure-modal-content-hide-transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
</style>
